<template>
    <div class="page">
        <el-row :gutter="20" type="flex" v-loading="loading" element-loading-text="图片加载中"
            element-loading-background="rgba(255, 255, 255, 0)">
            <el-col :span="11">
                <div class="svg-div cursor" id="svg-div"></div>
                <div id="contrast-div"></div>
            </el-col>
            <el-col :span="1">
                <div style="height: 100%;">
                    <el-divider class="vertical-line" direction="vertical"></el-divider>
                </div>
            </el-col>

            <el-col :span="12" class="scorll-view">
                <el-row type="flex" align="middle">
                    <el-col :span="12">
                        <el-image :src="imageUrl" :preview-src-list="[imageUrl]" fit="contain" class="avatar cursor" id="avatar">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </el-col>
                    <el-col :span="4">
                        <el-upload :file-list="fileList" action="" :accept="accept" :show-file-list="false"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                            :on-change="onAvatarChange" :auto-upload="false">
                            <!-- <i class="el-icon-plus avatar-uploader-icon"></i> -->
                            <el-button type="primary">上传</el-button>
                        </el-upload>
                    </el-col>
                    <el-col :span="8">
                        <el-row>
                            <el-col class="mb-10">
                                <el-select v-model="spliceColorType" placeholder="分割类型" @change="spliceColorTypeChange">
                                    <el-option v-for="item in spliceColorTypeOptions" :key="item.value"
                                        :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col v-if="spliceColorType==2" class="color-view">
                                <div class="color-icon" :style="{background:item.fill}" v-for="(item,index) in placeOptions" :key="index"></div>
                            </el-col>
                            <el-col>
                                <el-select v-model="spliceChildrenType" placeholder="是否拆分子项"
                                    @change="spliceChildrenTypeChange">
                                    <el-option v-for="item in spliceChildrenTypeOptions" :key="item.value"
                                        :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>

                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <!-- <el-collapse>
                    <el-collapse-item title="一致性 Consistency" name="1">

                    </el-collapse-item>

                </el-collapse> -->
                <el-row class="mb-10" :id="select.scrollId" v-for="(select,selectIndex) in selectOptions" :key="select.id">
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <div class="preview-self-icon cursor" @mouseenter="mouseenter(select)"
                                @mouseleave="mouseleave(select)" v-html="select.selfSvg" v-if="select.selfSvg"></div>
                        </el-col>
                        <el-col :span="20">
                            <el-row>
                                <el-col :span="11" class="mb-10">
                                    <el-select v-model="select.value" :ref="select.scrollId" placeholder="请选择纹理"
                                        @change="selectChange($event, select)" @focus="onFocus(select)"
                                        @mouseenter.native="mouseenter(select)" @mouseleave.native="mouseleave(select)">
                                        <template #prefix>
                                            <div class="select-view">
                                                <img class="select-texture" :src="select.texture" v-if="select.texture">
                                                <!-- <span :style="{color: select.value}">{{  }}</span> -->
                                                <div class="select-icon-triangle" v-if="select.active"></div>
                                            </div>
                                        </template>
                                        <el-option v-for="item in select.colorOptions" :key="item.fill"
                                            :label="item.fill" :value="item.fill">
                                            <div class="select-view">
                                                <img class="select-texture" :src="item.icon">
                                                <span :style="{ color: item.fill }">{{ item.fill }}</span>
                                            </div>

                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="11" class="mb-10 slider">
                                    <!-- <el-select v-model="select.angle" placeholder="请选择角度"
                                         @focus="onFocus(select)"
                                         @change="angleChange($event, select)" @mouseenter.native="mouseenter(select)" @mouseleave.native="mouseleave(select)"
                                        >
                                        <el-option v-for="item in angleOptions" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select> -->
                                    <span class="demonstration">角度</span>
                                    <div class="slider-view"><el-slider v-model="select.angle" :min="0" :max="270"
                                            :step="10" @change="angleChange($event, select)">
                                        </el-slider></div>

                                </el-col>
                                <el-col :span="2" class="mb-10">
                                    <el-button size="mini" icon="el-icon-delete"
                                        @click="deletePath(select,selectIndex)"></el-button>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col class="preview-children-view">
                                    <div class="preview-children-icon" v-html="childrenSvg"
                                        v-for="(childrenSvg, childrenIndex) in select.children" :key="childrenIndex">
                                    </div>
                                </el-col>
                            </el-row>

                        </el-col>
                    </el-row>
                </el-row>
            </el-col>
        </el-row>

    </div>
</template>

<script>

import { fileToBase64, getImageSize } from "@/lib/getImageData";
import { loadImage } from "@/lib/embroidery";
import { parseToDOM } from "@/utils/common";
import { placeOptions, colorOptions, selectOptions, angleOptions, spliceColorTypeOptions, spliceChildrenTypeOptions } from "@/utils/options/colors";
export default {
    name: 'homePage',
    components: {
    },
    data() {
        return {
            parseToDOM,
            placeOptions,
            colorOptions,
            angleOptions,
            spliceColorTypeOptions,
            spliceChildrenTypeOptions,
            loading: false,
            selectOptions: [],
            textureOptions: [],
            svgIcons: "",
            imageUrl: '',
            img: '',
            accept: ".png,.jpeg,.jpg",
            fileList: [],
            selectItem: null,
            selectColor: "#a0fce8",
            fileDataURL: null,
            spliceColorType: 1,
            spliceChildrenType: 1,
            contrastImage: null
        };
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            console.log(file);
        },
        onAvatarChange(file, fileList) {
            //图片转为base64位
            if (fileList[0]) {
                this.loading = true
                fileToBase64(fileList[0].raw, (result) => {
                    this.fileDataURL = result
                    this.getImageInfo()
                    // this.getSvgData()
                    this.fileList = []
                })
                this.imageUrl = URL.createObjectURL(file.raw);
                // this.$nextTick(() => {
                //     this.getImageInfo(document.getElementById("avatar"))
                // })

            }
        },
        // getImageInfo() {
        //     let img = new Image()
        //     img.src = this.fileDataURL
        //     img.onload = () => {
        //         console.log(img.width);
        //         loadImage({
        //             image: img,
        //             spliceColorType: this.spliceColorType,
        //             callback: (res) => {
        //                 this.svgIcons = res.svg
        //                 this.initSelectOptions(res.colors)
        //                 this.setSvgData()
        //             }
        //         })
        //     }
        // },
        getImageInfo() {
            let img = new Image()
            img.src = this.fileDataURL
            // img.style.filter="blur(1px) contrast(6.8) blur(0.25px)"
            // img.style.position="fixed"
            // img.style.top="0"
            // img.style.left="0"
            // console.log(img);
            // let div = document.getElementById("contrast-div")
            // div.appendChild(img)            
            // this.contrastImage=img
            img.onload = () => {
                loadImage({
                    image: img,
                    spliceColorType: this.spliceColorType,
                    spliceChildrenType: this.spliceChildrenType,
                    callback: (res) => {
                        let { svg, colors, error } = res
                        if (error) {
                            this.$message.error(error)
                            this.loading = false
                            return false
                        }
                        this.svgIcons = svg
                        this.initSelectOptions(colors)
                        this.setSvgData()
                    }
                })
            }
        },
        setSvgData() {
            let div = document.getElementById("svg-div")
            let nodes = this.parseToDOM(this.svgIcons)[0]

            this.selectOptions.map(item => {
                let path = nodes.getElementById(item.id)
                if (path) {
                    path.addEventListener('click', (e) => {
                        this.moveTo(item)
                    })
                }
            })
            div.innerHTML = ""
            div.appendChild(nodes)
            this.loading = false
        },
        initSelectOptions(colors) {
            this.selectOptions = colors.map(target => {
                return {
                    id: target.id,
                    scrollId: "scroll-" + target.id,
                    active: false,
                    value: target.color,
                    texture: null,
                    oldColor: null,
                    angle: 0,
                    selfSvg: target.selfSvg,
                    children: target.children,
                    colorOptions: [
                        // { fill: target.color },
                        ...this.colorOptions
                    ]
                }
            })
        },
        changeSvgData(selectItem) {
            let path = document.getElementById(selectItem.id)
            this.changePathData(path, selectItem)
        },
        changeHoverStyle(selectItem) {
            let path = document.getElementById(selectItem.id)
            if (selectItem.active) {
                path.classList.add("hover-style")
            } else {
                path.classList.remove("hover-style")
            }
        },
        changePathData(path, item) {
            this.colorOptions.map(colorItem => {
                if (colorItem.fill === item.value) {
                    let image = document.getElementById(colorItem.id + '-image')
                    // console.log("pattern", image, colorItem.id);
                    image.setAttribute("transform", `rotate(${item.angle},10,10)`)
                    path.setAttribute("fill", `url(#${colorItem.id})`)
                }
            })
        },
        mouseenter(item) {
            item.active = true
            this.changeHoverStyle(item)
        },
        mouseleave(item) {
            item.active = false
            this.changeHoverStyle(item)
        },
        moveTo(item) {
            this.selectOptions.map(target => {
                if (item.id === target.id) {
                    this.$refs[target.scrollId][0].focus()
                } else {
                    this.$refs[target.scrollId][0].blur()
                }
            })
            let select = document.getElementById(item.scrollId).scrollIntoView(true)
            // console.log("select", select, item);
        },
        onFocus(item) {
            this.selectOptions.map(target => {
                if (item.id === target.id) {
                    target.active = true
                } else {
                    target.active = false
                }
            })
        },
        selectChange(event, item) {
            this.colorOptions.map(e => {
                if (e.fill === event) {
                    item.texture = e.icon
                }
            })
            // console.log(this.selectOptions);

            this.changeSvgData(item)
        },
        angleChange(event, item) {
            this.changeSvgData(item)
        },
        deletePath(item,index) {
            let path = document.getElementById(item.id)
            path.parentNode.removeChild(path)
            this.selectOptions.splice(index,1)
        },
        spliceColorTypeChange() {
            if (this.fileDataURL) {
                this.getImageInfo()
            }
        },
        spliceChildrenTypeChange() {
            if (this.fileDataURL) {
                this.getImageInfo()
            }
        }

    }
}
</script>

<style lang="scss">
.page {
    padding: 24px;

    // text-align: center;
    // background-image: url("../assets/texture-1.png") ;
    .vertical-line {
        height: 100%;
    }
}

.svg-div {
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.cursor:hover {
    cursor: pointer;
}


.svg-div svg path:hover {
    cursor: pointer;
    fill: #a0fce8 !important;
}

.svg-div .hover-style {
    cursor: pointer;
    fill: #a0fce8 !important;
}

.preview-self-icon {
    width: 80px;
    height: 80px;
    display: inline-block;
}

.preview-children-view {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.preview-children-icon {
    width: 60px;
    height: 60px;
    border: 1px solid #e7e6e6;
    margin-right: 12px;
    margin-bottom: 12px;
}

.select-view {
    height: 24px;
    display: flex;
    align-items: center;
    margin-top: 8px;
    position: relative;
    font-size: 14px;
    line-height: 24px;
    color: #333333;

    .select-icon-triangle {
        position: absolute;
        width: 0px;
        height: 0px;
        // background: red;
        border-top: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid red;
        // border-radius: 50%;
        left: -30px;
        top: 50%;
        transform: translateY(-50%);
    }
}

.select-texture {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    // margin-bottom: 8px;
}

.slider {
    display: flex;
    align-items: center;
}

.slider-view {
    flex: 1;
    padding: 0 12px;
}

.demonstration {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 18px;
    margin-right: 12px;
}

.fixed {
    position: fixed;
    top: 20px;
    right: 20px;

}

.scorll-view {
    height: 800px;
    padding-bottom: 40px;
    // background: pink;
    // overflow: scroll;
    overflow-y: auto;
    /* height: 100vh-120px; */

}

.mt-5 {
    margin-top: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mr-10 {
    margin-right: 10px;

}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;

}

.avatar {
    width: 146px;
    height: 146px;
    display: block;
    border: 1px solid rgb(217, 217, 217);
    border-radius: 6px;

    .image-slot {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

#scorll-view-head {
    width: 100px;
    height: 100px;

}

.color-view{
    border: 1px solid #dbdbdb;
    background: rgba($color: #000000, $alpha: 0.1);
    border-radius: 4px;
    padding: 5px 5px 0 5px;
    margin-bottom: 10px;
}

.color-icon{
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
}
</style>